//用户中心
$('.user').hover(function () {
    $(this).find('dl>dd').show()
}, function () {
    $(this).find('dl>dd').hide()
})
//商品介绍
$('.detail_hd>ul>li').hover(function(){
    $(this).addClass('on').siblings().removeClass('on');
    let index = $(this).index();
    $('.detail_bd>div').eq(index).show().siblings().hide()
})
//全部商品分类
$('.category').hover(function(){
   $(this).find('.cat_bd').show(); 
},function(){ $(this).find('.cat_bd').hide()})
$('.cat').hover(function(){
    $(this).find('.cat_detail').show()
  },function(){ $(this).find('.cat_detail').hide()})


//点击小图换大图
$('.smallpic_wrap>ul>li').click(function () {
    $(this).find('img').css({border:'2px solid #e4393c',
        padding: 0}).parents('li').siblings().find('img').css({border:' 1px solid #CECFCE',
            padding:' 1px'})
    let i = $(this).index() + 1;
    $('.midpic>a>img').prop('src', './images/preview_m' + i + '.jpg')
    $('.big>img').prop('src', './images/preview_l' + i + '.jpg')
})
//颜色
$('.product>dl>dd>a>img').hover(function(){
    $(this).addClass('.cur').siblings().removeClass('.cur')
})
$('.smallpic_wrap')
//左按钮

$('.goodsinfo').on('click','#reduce_num',(function(){
let j =$(this).siblings('input').val();
j--
if(j==0){
    alert('傻逼，还买不买了？')
   return false
}
 $(this).siblings('input').val(j)


}))

//右按钮
$('.goodsinfo').on('click','#add_num',(function(){
    let j =$(this).siblings('input').val();
    j++
   
     $(this).siblings('input').val(j)
    
    
    }))

//点击换图
let a = 1;
$('.smallpic>.on').click(function () {
    if (a >= 4) {
        a = 4
        $('.smallpic_wrap>ul').css('left', -62 * a + 'px')
    } else {
        $('.smallpic_wrap>ul').css('left', -62 * a + 'px')
        a++;
    }

})

$('.smallpic>.off').click(function () {
    if (a <= 0) {
        a = 0
        $('.smallpic_wrap>ul').css('left', -62 * a + 'px')
    } else {
        $('.smallpic_wrap>ul').css('left', -62 * a + 'px')
        a--;
    }

})
//放大镜
var midpic = document.querySelector('.midpic');
var mask  = document.querySelector('.mask');
var big = document.querySelector('.big');
midpic.addEventListener('mouseover',function(){
    mask.style.display = 'block';
    big.style.display ='block';
});
midpic.addEventListener('mouseout',function(){
    mask.style.display = 'none';
    big.style.display ='none';
});
midpic.addEventListener('mousemove',function(e){
var x = e.pageX-this.offsetLeft;
var y = e.pageY-this.offsetTop;
var maskX = x - mask.offsetWidth/2;
var maskY = y - mask.offsetHeight/2;
maskMax = midpic.offsetWidth-mask.offsetWidth;
if(maskX<=0){
    maskX=0;
}else if(maskX>=maskMax){
   maskX = maskMax;
}
if(maskY<=0){
    maskY=0;
}else if(maskY>=maskMax){
   maskY = maskMax;
};
mask.style.left = maskX+'px';
mask.style.top = maskY+'px';
  //3．大图片的移动距离=遮挡层移动距离*大图片最大移动距离/遮挡层的最大移动距离
var bigImg = document.querySelector('.bigImg')
var bigMax = bigImg.offsetWidth-big.offsetWidth;
var bigX = maskX*bigMax/maskMax;
var bigY = maskY*bigMax/maskMax;
bigImg.style.left =-bigX+'px';
bigImg.style.top =-bigY+'px';
})


//详情页更换
let goodsId = geturlId('id');
//console.log(goodsId);
$.get(baseUrl+'/goods/detail',{goodsId:goodsId},function(res){
    let data = res.data;
    //console.log(data);
    let html = '';
    $('.summary>h3>strong').html(data.goodsName);
    html+=`	<ul>
    <li><span>商品编号： </span>${data.goodsSn}</li>
    <li class="market_price"><span>定价：</span><em>￥${data.marketPrice}</em></li>
    <li class="shop_price"><span>本店价：</span> <strong>￥${data.shopPrice}</strong> <a href="">(降价通知)</a></li>
    <li><span>上架时间：</span>${data.updateTime}</li>
    <li class="star"><span>商品评分：</span> <strong></strong><a href="">(已有21人评价)</a></li>
</ul><form action="" method="post" class="choose">
<ul>
    <li class="product">
        <dl>
            <dt>颜色：</dt>
            <dd>
                <a class="selected" href="javascript:;">黑色 <input type="radio" name="color"
                        value="黑色" checked="checked" /></a>
                <a href="javascript:;">白色 <input type="radio" name="color" value="白色" /></a>
                <a href="javascript:;">蓝色 <input type="radio" name="color" value="蓝色" /></a>
                <input type="hidden" name="" value="" />
            </dd>
        </dl>
    </li>

    <li class="product">
        <dl>
            <dt>版本：</dt>
            <dd>
                <a href="javascript:;">i3 4G内存版 <input type="radio" name="ver" value="" /></a>
                <a href="javascript:;">i5 4G内存版 <input type="radio" name="ver" value="" /></a>
                <a class="selected" href="javascript:;">i5 8G内存版<input type="radio" name="ver"
                        value="" checked="checked" /></a>
                <a href="javascript:;">SSD超极本 <input type="radio" name="ver" value="" /></a>
                <input type="hidden" name="" value="" />
            </dd>
        </dl>
    </li>

    <li>
        <dl>
            <dt>购买数量：</dt>
            <dd>
                <a href="javascript:;" id="reduce_num"></a>
                <input type="text" name="amount" value="1" class="amount" />
                <a href="javascript:;" id="add_num"></a>
            </dd>
        </dl>
    </li>

    <li>
        <dl>
            <dt>&nbsp;</dt>
            <dd>
                <input type="submit" value="" class="add_btn" />
            </dd>
        </dl>
    </li>

</ul>
</form>`;
$('.goodsinfo').html(html);
let ht = '';
data.goodsImg.forEach(function(itme,index){

ht+=`<li class="cur">
        <a class="" href="javascript:void(0);"
        rel="{gallery: 'gal1', smallimage: '${itme.goodsImg}',largeimage: '${itme.goodsImg}'}"><img
        src="${itme.goodsImg}"></a>
</li>`
});
$('.smallpic_wrap>ul').html(ht)
})
$('.smallpic_wrap').on('click','.cur>a>img',function(){
 $(this).css({border:'1px solid red'}).parents('li').siblings().find('img').css({border:'none'})
     $(this).addClass('zoomThumbActive').siblings().removeClass('zoomThumbActive');
        let dz = $(this).prop('src');
        $('.jqzoom>img').prop('src',dz)
        $('.bigImg').prop('src',dz)
})
//跳转购物车
$('.goodsinfo').on('click','.add_btn',function(){
   let input =  $('.amount').val()
    $.post(baseUrl+'/cart/add',{userId:userInfo.id,goodsId:goodsId,goodsCount:input},function(){
        location.href = 'flow1.html'
     
    })
   
   
    return false
})